<template>
  <div class="mainNav-wrapper">
    <div>
      <el-menu
        :default-active="activeIndex"
        class="mainNav-el-menu"
        ref="elmenu"
      >
        <div >
          <el-menu-item index="0" @click="clickSubItem">
            <span slot="title">新增笔记</span>
          </el-menu-item>
        </div>
        <div >
          <el-menu-item index="1" @click="clickSubItem">
            <span slot="title">笔记列表</span>
          </el-menu-item>
        </div>
      </el-menu>
    </div>
    <div class="rightLine"></div>
  </div>
</template>

<script type="text/ecmascript-6">

  export default {
    data() {
      return {
        activeIndex: '0'
      }
    },
    mounted() {
      if (this.$route.fullPath !== '/new') {
        this.$router.push('/new')
      }
      this.activeIndex = '0'
    },
    created() {
    },
    destroyed() {
    },
    methods: {
      clickSubItem(data) {
        if (data.index === '0') {
          this.$router.push('/new')
        }
        if (data.index === '1') {
          this.$router.push('/view')
        }
      }
    },
    watch: {
      '$route': (to) => {
      }
    }
  }
</script>

<style lang="scss">
  @import "../../common/scss/base";

  .mainNav-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .mainNav-wrapper .mainNav-el-menu {
    margin-top: 28px;
    border-right-width: 0px;
  }
  .mainNav-wrapper .mainNav-el-menu .el-menu-item {
    margin-bottom: 18px;
  }
  .mainNav-wrapper .mainNav-el-menu .el-menu-item span {
    font-size: 18px;
  }
  .mainNav-wrapper .mainNav-el-menu i {
    font-size: 18px;
    line-height: 55px;
    margin-right: 10px;
    margin-left: 20px;
  }
  .mainNav-wrapper .mainNav-el-menu i:before {
  }
  .mainNav-wrapper .mainNav-el-menu .is-active {
    color: white;
    background-color: $mainColor;
  }
  .mainNav-wrapper .mainNav-el-menu .is-active i:before {
    color: white;
  }
  .mainNav-wrapper .mainNav-el-menu .is-active span {
    color: white;
  }
  .rightLine {
    position: absolute;
    width: 1px;
    top: 72px;
    right: 0px;
    height: calc(100% - 72px);
    background-color: #D5DFED;
  }
</style>
